﻿<!DOCTYPE html>
<div id="chart" />
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.js"></script>
<link href="https://rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.css" rel="stylesheet" type="text/css" />
<style>
    #chart {
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
    }
</style>
<script>
			var configSankey = {
				margin: { top: 10, left: 10, right: 10, bottom: 10 },
				nodes: {
					dynamicSizeFontNode: false,
					draggableX: true,
					draggableY: true,
					colors: d3.scaleOrdinal(d3.schemeCategory10)
				},
				links: {
					formatValue: function(val) {
						return d3.format("0")(val) + ' row(s)';
					}
				},
				tooltip: {
					infoDiv: true,
					labelSource: 'Input:',
					labelTarget: 'Output:'
				}
			}
    var values = '<<SANKEY_STATISTICS>>';
    var objSankey = sk.createSankey('#chart', configSankey, values);

</script>